{% extends 'mom.html' %}    <!-- 模板继承 -->
{% load static %}   <!-- 加载静态资源 -->

{% block css %}
{% endblock %}

{% block content %}
    <div class="account">
        {% csrf_token %}
        <h2>测试 <span class="label label-default">AJ</span></h2>
        <br/>

        <input type="text" id="user" placeholder="用户名"/>
        <input type="text" id="age" placeholder="年龄"/>
        <input type="button" class="btn btn-primary" value="提交1" onclick="clickme();"/><!-- 绑定事件，点击就执行这个函数 -->

        <form id="form1">
            {% csrf_token %}
            <input type="text" name="sex" placeholder="性别"/>
            <input type="text" name="lon" placeholder="身高"/>
        </form>
        <input id="btn2" type="button" class="btn btn-primary" value="提交f"/><!-- 可以利用ID进行绑定 -->
    </div>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        $(function () {
            //页面加载完自动执行
            bin_btn();//'执行'函数
        })

        function bin_btn() {
            $('#btn2').click(function () {   //将函数绑定到id(不点按钮不运行)
                $.ajax({
                    url: "/aj/test/",//对该网址发请求
                    type: 'post',//get post
                    data: $('#form1').serialize(), //直接发一个form的内容
                    dataType: 'JSON',//自动解析成JSON，可以单个参数取出
                    success: function (res) {//成功后执行这个函数 res服务器返回的值
                        console.log(res);
                        console.log(res.status);
                        location.reload();//刷新
                    }
                })
            })
        }

        function clickme() {
            //console.log('点击了');
            $.ajax({
                url: "/aj/test/",//对该网址发请求
                type: 'post',//get post
                data: {
                    csrfmiddlewaretoken:$('{% csrf_token %}').val(),
                    user: $('#user').val(),//获取对应id的值
                    age: $('#age').val(),
                },
                dataType: 'JSON',//自动解析成JSON，可以单个参数取出
                success: function (res) {//成功后执行这个函数 res服务器返回的值
                    console.log(res);
                    console.log(res.status);
                },
            })
        }
    </script>
{% endblock %}
